<template>
	<eui-background type="common" class="demo">
		<eui-navbar ref="EuiNavBar" title="会员全景视图" :displayable="true" rightIcon="">
		</eui-navbar>
		<view class="top-view">
			<eui-search-bar ref="RdsSearchBar" v-model="searchText" placeholder="手机号/证件号/卡号/动态码"
				leftIcon="icon-saoyisao" @confirm="searchConfirm" @leftIconClick="scanCode" radius="30"
				:showFilterIcon="false" />
		</view>
		<eui-card title="基础信息" class="flex-row" v-if="customerData.strNo">
			<template v-slot:extra>
				<view class="extra-view">
					<view v-if="customerData.strCardStatus=='正常'" class="status1 extra-text">
						{{customerData.strCardStatus}}
					</view>
					<view v-else-if="customerData.strCardStatus=='初始'" class="status2 extra-text">
						{{customerData.strCardStatus}}
					</view>
					<view v-else-if="customerData.strCardStatus=='挂失'" class="status4 extra-text">
						{{customerData.strCardStatus}}
					</view>
					<view v-else-if="customerData.strCardStatus=='暂停使用'" class="status4 extra-text">
						{{customerData.strCardStatus}}
					</view>
					<view v-else class="status3 extra-text">
						{{customerData.strCardStatus}}
					</view>
				</view>
			</template>
			<view class="container">
				<view class="imageinfo">
					<view class="img-box">
						<image v-if="customerData.strSex=='男'" src="../../../static/img/avatar_male.png"
							mode="scaleToFill" class="image" />
						<image v-else-if="customerData.strSex=='女'" src="../../../static/img/avatar_female.png"
							mode="scaleToFill" class="image" />
						<image v-else src="../../../static/img/avatar_male.png" mode="scaleToFill" class="image" />
					</view>
					<view class="nickname">
						<strong>{{customerData.strName}}</strong>
					</view>
				</view>
				<view class="custtext">
					<view class="custtextitem">
						<image src="../../../static/img/cid.png" class="icimage"></image>
						<view class="textcommon">{{customerData.strID}}</view>
					</view>
					<view class="custtextitem">
						<image src="../../../static/img/phone.png" class="icimage"></image>
						<view class="textcommon">{{customerData.strMobile}}</view>
					</view>
					<view class="custtextitem">
						<image src="../../../static/img/custlevel.png" class="icimage"></image>
						<view class="custlevel">
							<view class="textcommon">{{customerData.strCardName}}</view>
							<view style="font-size:10px; color: #8a8a8a;">
								{{dayjs(customerData.strCardStartDt).format('YYYY-MM-DD')}} 至
								{{dayjs(customerData.strCardEndDt).format('YYYY-MM-DD')}}
							</view>
						</view>
					</view>
					<view class="custtextitem">
						<image src="../../../static/img/cardbao.png" class="icimage"></image>
						<view class="textcommon">{{customerData.strCardNo}}</view>
					</view>
				</view>
			</view>

			<view class="perc" v-if="custLevelData.c_upcardname">
				<progress :percent="percentnum" stroke-width="10" />
				<view class="levelperc">
					<view class="left">{{custLevelData.c_cardname}}</view>
					<view class="middle">消费
						{{getNumValue(custLevelData.c_upgrade_st_value-custLevelData.c_current_amount)}} 可升级
					</view>
					<view class="right">{{custLevelData.c_upcardname}}</view>
				</view>
			</view>

			<view class="scoreinfo">
				<view class="scoreinfoitem">
					<view class="custtitle">可用积分</view>
					<view class="custscoretext">{{getNumValue(customerData.decCanUseScore)}}</view>
					<view>
						<image src="../../../static/img/righticon.png" class="rightimg" @click="naviToScore"></image>
					</view>
				</view>
				<view class="scoreinfoitem">
					<view class="custtitle">可用余额</view>
					<view class="custscoretext">
						{{getNumValue(customerData.decCardAmount+customerData.decCardDepositAmount)}}
					</view>
					<view>
						<image src="../../../static/img/righticon.png" class="rightimg" @click="naviToDeposit"></image>
					</view>
				</view>
				<view class="scoreinfoitem">
					<view class="custtitle">可用券数量</view>
					<view class="custscoretext">{{canUseCouponData.iTotalNoUsed}}</view>
					<view>
						<image src="../../../static/img/righticon.png" class="rightimg" @click="naviToCoupon"></image>
					</view>
				</view>
				<view class="scoreinfoitem">
					<view class="custtitle">注册时间</view>
					<view style="font-size: 13px;margin-top: 2px;">
						{{dayjs(customerData.dtIntroduceDt).format('YYYY-MM-DD')}}
					</view>
				</view>
				<view class="scoreinfoitem" style="width: 600rpx;">
					<view class="custtitle">归属机构</view>
					<view style="font-size: 13px;margin-top: 2px;">
						{{customerData.strMkStoreId}}
					</view>
				</view>
			</view>

		</eui-card>
		<eui-card title="顾客标签" class="flex-row" v-if="!!custTagsData&&custTagsData?.length>0">
			<template v-slot:extra>
				<view class="extra-view moretext">
					<view class="custtextitem" @click="naviToTag">
						<view class="moretext">更多</view>
						<view>
							<image src="../../../static/img/righticon.png" class="rightimg"></image>
						</view>
					</view>
				</view>
			</template>
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<view class="u-page__tag-item" v-for="(item,index) in custTagsData" :key="index">
						<eui-tag v-if="index<=7" :type="getTagType()" borderRadius="8px"
							plain>{{item.markName}}</eui-tag>
					</view>
				</view>
			</view>
		</eui-card>
		<eui-card title="顾客群组" class="flex-row" v-if="!!custGroupsData&&custGroupsData?.length>0">
			<template v-slot:extra>
				<view class="extra-view moretext">
					<view class="custtextitem" @click="naviToGroup">
						<view class="moretext">更多</view>
						<view>
							<image src="../../../static/img/righticon.png" class="rightimg"></image>
						</view>
					</view>
				</view>
			</template>
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<view class="u-page__tag-item" v-for="(item,index) in custGroupsData" :key="index">
						<eui-tag v-if="index<=7" :type="getTagType()" borderRadius="8px"
							plain>{{item.groupName}}</eui-tag>
					</view>
				</view>
			</view>
		</eui-card>
		<eui-card title="消费信息" class="flex-row" v-if="custConsumeData.strCustomerNo">
			<template v-slot:extra>
				<view class="extra-view moretext">
					<view class="custtextitem" @click="naviToSale">
						<view class="moretext">更多</view>
						<view>
							<image src="../../../static/img/righticon.png" class="rightimg"></image>
						</view>
					</view>
				</view>
			</template>
			<view class="consume">
				<view class="consumeitem" style="width: 500rpx;">
					<view class="custtitle">最近消费时间</view>
					<view class="consumetext">{{dayjs(custConsumeData.dtLastDt).format('YYYY-MM-DD HH:mm')}}</view>
				</view>
				<view class="consumeitem" style="width: 500rpx;">
					<view class="custtitle">最近消费机构</view>
					<view class="consumetext">{{custConsumeData.strLastStoreId}}
					</view>
				</view>
				<view class="consumeitem">
					<view class="custtitle">最近消费金额</view>
					<view class="consumetext">{{getNumValue(custConsumeData.decLastAmount)}}</view>
				</view>
				<view class="consumeitem">
					<view class="custtitle">最近获得积分</view>
					<view class="consumetext">{{getNumValue(customerData.decEndScore)}}</view>
				</view>
			</view>
		</eui-card>

		<!-- 初始界面 -->
		<eui-card title="基础信息" class="flex-row" v-if="!customerData.strNo">
			<template v-slot:extra>
				<view class="extra-view">
					<text class="extra-text">正常</text>
				</view>
			</template>
			<view class="container">
				<view class="imageinfo">
					<view class="img-box">
						<image src="../../../static/img/avatar_male.png" mode="scaleToFill" class="image" />
					</view>
					<view class="nickname">
						<strong>张三</strong>
					</view>
				</view>
				<view class="custtext">
					<view class="custtextitem">
						<image src="../../../static/img/cid.png" class="icimage"></image>
						<view class="textcommon">4130************1221</view>
					</view>
					<view class="custtextitem">
						<image src="../../../static/img/phone.png" class="icimage"></image>
						<view class="textcommon">186****7667</view>
					</view>
					<view class="custtextitem">
						<image src="../../../static/img/custlevel.png" class="icimage"></image>
						<view class="custlevel">
							<view class="textcommon">金卡</view>
							<view style="font-size:10px; color: #8a8a8a;">2025-01-01 至 2099-12-30</view>
						</view>
					</view>
					<view class="custtextitem">
						<image src="../../../static/img/cardbao.png" class="icimage"></image>
						<view class="textcommon">000001</view>
					</view>
				</view>
			</view>

			<view class="perc">
				<progress percent="20" stroke-width="10" />
				<view class="levelperc">
					<view class="left"></view>
					<view class="middle"></view>
					<view class="right"></view>
				</view>
			</view>

			<view class="scoreinfo">
				<view class="scoreinfoitem">
					<view class="custtitle">可用积分</view>
					<view class="custscoretext">0</view>
					<view>
						<image src="../../../static/img/righticon.png" class="rightimg"></image>
					</view>
				</view>
				<view class="scoreinfoitem">
					<view class="custtitle">可用余额</view>
					<view class="custscoretext">0</view>
					<view>
						<image src="../../../static/img/righticon.png" class="rightimg"></image>
					</view>
				</view>
				<view class="scoreinfoitem">
					<view class="custtitle">可用券数量</view>
					<view class="custscoretext">0</view>
					<view>
						<image src="../../../static/img/righticon.png" class="rightimg"></image>
					</view>
				</view>
				<view class="scoreinfoitem">
					<view class="custtitle">注册时间</view>
					<view style="font-size: 13px;margin-top: 2px;">2025-01-1</view>
				</view>
				<view class="scoreinfoitem" style="width: 600rpx;">
					<view class="custtitle">归属机构</view>
					<view style="font-size: 13px;margin-top: 2px;">11</view>
				</view>
			</view>

		</eui-card>
	</eui-background>
</template>

<script setup lang="js">
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import service from "@/common/service";
	import apps from '@/pages/MainViews/app';
	/* import { getDictName } from '../components/RelatedName.js'; */
	import {
		getCrmUrl,
		crmRequest
	} from '@/hooks/crmServices';
	import {
		storeToRefs
	} from 'pinia';
	import {
		useThemeStore
	} from '@/store/themeStore';
	import {
		useMainStore
	} from "@/store/modules/store";
	import {
		init
	} from '@/hooks/init';
	import Enjoy from "@/common/enjoy";
	import dayjs from 'dayjs';
	const mainStore = useMainStore();
	const {
		loginInfo
	} = mainStore;
	const searchText = ref('');
	const customerData = ref({}); //顾客主体信息
	const canUseCouponData = ref({}); //顾客可用券信息
	const custTagsData = ref([]); //标签信息
	const custGroupsData = ref([]); //群组信息
	const custConsumeData = ref({}); //会员消费情况(汇总)
	const custLevelData = ref({
		c_cardname: '',
		c_upcardname: '',
		c_upgrade_st_value: 0,
		c_current_amount: 0
	}); //等级信息
	const percentnum = ref(20);
	onLoad(() => {

	})
	onShow(() => {

	})
	const crmUrl = getCrmUrl();

	// 点击扫描图标跳转打开摄像头
	const scanCode = () => {
		uni.scanCode({
			success: function(res) {
				if (res.result != '' && res.result != undefined && res.result != null) {
					searchText.value = res.result;
					getData();
				}
			},
		});
	}
	const searchConfirm = async (e) => {
		if (!e) {
			return;
		}
		searchText.value = e.value;
		await getData();
	}
	const getData = async (e) => {
		if (!searchText.value) {
			uni.showToast({
				duration: 3000,
				icon: 'none',
				title: '请输入会员查询条件',
				mask: true,
			});
			return;
		}
		let req = {
			strMid: searchText.value,
			strProcType: "会员验证自动识别",
		}
		uni.showLoading({
			title: "查询中...",
			mask: true
		});
		const rspdata = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'QueryRecordV5', req);
		console.log('getdata')
		console.log(rspdata)
		if (!rspdata) {
			uni.showToast({
				duration: 3000,
				icon: 'none',
				title: '查询不到对应的会员信息!',
				mask: true,
			});
			uni.hideLoading();
			return;
		}

		await binddatanew(rspdata.strNo);
		uni.hideLoading();
	}
	const binddatanew = async (custno) => {
		let req = {
			strCustomerNo: custno,
			strCardStatus: "全部",
			strShowEnd: "是"
		}
		const custres = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'QueryRecordV5', req);
		console.log('binddatanew')
		console.log(custres)
		if (!custres || !custres.strNo) {
			uni.showToast({
				duration: 3000,
				icon: 'none',
				title: '查询不到对应的会员信息!',
				mask: true,
			});
			return;
		}
		customerData.value = custres;

		//绑定客户优惠券信息
		await bindCoupon(customerData.value.strNo);
		//绑定升级信息
		await bindCardlevel(customerData.value.strNo)
		//绑定客户标签群组
		await bindTagGroup(customerData.value.strNo)
		//绑定客户消费信息
		await bindConsume(customerData.value.strNo)
	}
	//绑定客户消费信息
	const bindConsume = async (custno) => {
		custConsumeData.valu = [];
		let req = {
			strCustomerNo: custno,
		}
		const res = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'CustomerConsumeSumQuery', req);
		console.log('bindConsume')
		console.log(res)
		custConsumeData.value = res;
	}
	//绑定客户优惠券信息
	const bindCoupon = async (custno) => {
		canUseCouponData.value = [];
		const req = {
			strCustomerNo: custno
		}
		const res = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'CustomerCouponSum', req);
		canUseCouponData.value = res
		console.log('bindcoupon可用')
		console.log(res)
	}
	//绑定客户标签群组信息
	const bindTagGroup = async (custno) => {
		custTagsData.value = [];
		custGroupsData.value = [];
		const req = {
			customerNo: custno
		}
		const res = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'GetCustomerGroupMark', req);
		if (res && res.lstMark && res.lstMark.length > 0) {
			custTagsData.value = res.lstMark; //标签
		}
		if (res && res.lstGroup && res.lstGroup.length > 0) {
			custGroupsData.value = res.lstGroup; //群组
		}
		console.log('bindTagGroup')
		console.log(res)
	}
	//绑定升级信息
	const bindCardlevel = async (custno) => {
		custLevelData.value = {};
		const cardlevels = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'GetCardLevelSet', '');
		console.log('cardlevels')
		console.log(cardlevels)

		const req = {
			strCustomerNo: custno
		}
		const consum = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService', 'GetCustomerConsum', req);
		console.log('consum')
		console.log(consum)
		if (consum && consum.strCurrentCardName && cardlevels && cardlevels.length > 0) {
			custLevelData.value.c_cardname = consum.strCurrentCardName
			let cardlevel = cardlevels.find(x => x.strCardName === consum.strCurrentCardName);
			console.log('cardlevel')
			console.log(cardlevel)
			if (cardlevel) {
				let upcardlevel = cardlevels.find(x => x.strLevelSort > cardlevel.strLevelSort);
				if (upcardlevel) {
					custLevelData.value.c_upcardname = upcardlevel.strCardName;
					custLevelData.value.c_upgrade_st_value = upcardlevel.strRelegationStValue;
					custLevelData.value.c_current_amount = consum.decCurrentAmt;

					let chazhi = getNumValue((custLevelData.value.c_current_amount / custLevelData.value
						.c_upgrade_st_value) * 100);
					percentnum.value = chazhi;
					console.log('计算差值')
					console.log(chazhi)
				}
			}
		}

	}
	const TagTypes = ['primary', 'warning', 'success', 'error', 'info']
	// 显示类型
	const getTagType = () => {
		const randomIndex = Math.floor(Math.random() * 5);
		return TagTypes[randomIndex];
	}
	// 显示数值
	const getNumValue = (value, precision = 2) => {
		return value ? parseFloat(value).toFixed(precision) : (0).toFixed(precision)
	}
	//跳转积分详情
	const naviToScore = (e) => {
		if (!customerData.value.strNo) {
			return;
		}
		uni.navigateTo({
			url: './scoredetail?custno=' + customerData.value.strNo,
		});
	}
	//跳转券详情
	const naviToCoupon = (e) => {
		if (!customerData.value.strNo) {
			return;
		}
		uni.navigateTo({
			url: './coupondetail?custno=' + customerData.value.strNo,
		});
	}
	//可用余额详情
	const naviToDeposit = (e) => {
		if (!customerData.value.strNo) {
			return;
		}
		uni.navigateTo({
			url: './depositdetail?custno=' + customerData.value.strNo,
		});
	}
	//标签详情
	const naviToTag = (e) => {
		if (!customerData.value.strNo) {
			return;
		}
		uni.navigateTo({
			url: './tagdetail?tags=' + encodeURIComponent(JSON.stringify(custTagsData.value)),
		});
	}
	//群组详情
	const naviToGroup = (e) => {
		if (!customerData.value.strNo) {
			return;
		}
		uni.navigateTo({
			url: './groupdetail?groups=' + encodeURIComponent(JSON.stringify(custGroupsData.value)),
		});
	}
	//消费详情
	const naviToSale = (e) => {
		if (!customerData.value.strNo) {
			return;
		}
		uni.navigateTo({
			url: './salesdetail?custno=' + customerData.value.strNo,
		});
	}
</script>

<style scoped lang="scss">
	.single-title span {
		font-size: 50px !important;
	}

	.uni-progress {
		border-radius: 100rpx !important;
	}

	.status1 {
		display: flex;
		background-color: #159C02;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 10rpx;
	}

	.status2 {
		display: flex;
		background-color: #235BDA;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 10rpx;
	}

	.status3 {
		display: flex;
		background-color: #999999;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 10rpx;
	}

	.status4 {
		display: flex;
		background-color: #d81e06;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 10rpx;
	}

	.consume {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: space-between; //纵向均匀排列
		flex-wrap: wrap;
	}

	.consumeitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
		width: 325rpx;
		margin-top: 15rpx;
	}

	.consumetext {
		font-size: 13px;
		margin-top: 4rpx;
	}

	.moretext {
		font-size: 24rpx;
		color: #8a8a8a;
		margin-top: 2rpx;
	}

	.demo {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		height: 100vh;
	}

	.u-demo-block {
		flex: 1;
		margin-bottom: 45rpx;

		&__content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			flex-direction: column;
		}

		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin-bottom: 16rpx;
			display: flex;
			flex-direction: row;
		}
	}


	.u-page__tag-item {
		margin-right: 38rpx;
		margin-top: 20rpx;
	}

	.u-demo-block__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.uni-progress-bar {
		border-radius: 30rpx;
	}

	.uni-progress-inner-bar {
		border-radius: 30rpx;
	}

	.textcommon {
		font-size: 15px;
		margin-top: 4rpx;
	}

	.scoreinfo {
		margin-top: 58rpx;
		display: flex;
		flex-direction: row; //水平排列
		justify-content: space-between; //纵向均匀排列
		flex-wrap: wrap;
	}

	.scoreinfoitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
		width: 325rpx;
	}

	.custtitle {
		font-size: 26rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
		color: #8a8a8a;
	}

	.custscoretext {
		font-size: 26rpx;
		margin-right: 0rpx;
		margin-top: 2rpx;
		color: #1296db
	}

	.left {
		flex: 0 0 200rpx;
		text-align: start;
	}

	.middle {
		flex: 1;
		text-align: center;
		color: #1296db
	}

	.right {
		flex: 0 0 200rpx;
		text-align: end;
	}

	.perc {
		margin-top: 40rpx;
		justify-content: space-between; //纵向均匀排列
	}

	.levelperc {
		font-size: 25rpx;
		display: flex;
		margin-top: 5rpx;
	}

	.custlevel {
		display: flex;
		flex-direction: column;
		justify-content: space-between; //纵向均匀排列
	}

	.imageinfo {
		display: flex;
		flex-direction: column;
		justify-content: center; //纵向居中排列
	}

	.custtextitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
	}

	.icimage {
		width: 48rpx;
		height: 48rpx;
		margin-right: 18rpx;
	}

	.rightimg {
		width: 40rpx;
		height: 40rpx;
		margin-left: 4rpx;
	}

	.custtext {
		display: flex;
		flex-direction: column;
		justify-content: space-between; //纵向均匀排列
		height: 240rpx;
		flex-wrap: wrap;
		/* 允许换行 */
		margin-top: 40rpx;

	}

	.nickname {
		font-size: 35rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.container {
		display: flex;
		flex-direction: row;
	}

	.img-box {
		margin-right: 15rpx;
		width: 280rpx;
		height: 280rpx;
	}

	.image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}

	.right-box {
		width: 0;
		flex: 1;
	}
</style>